<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form表单系列标签</title>
</head>
<body>
    <!-- action - 对应后端的请求地址
         method - 提交方式
    -->
    <form action="http://www.baidu.com" method="get">
        <!-- 普通文本框  - 数据的校验是分成前端校验和后端校验[java代码]
        required - 不能为空
        pattern - 正则表达式
        举例 - 1. 只能输入小写字母,总共只能输入5个
        {n} - 正好是n次
        {m,n} - 出现的次数[m,n]

        举例 - 用户名必须是大写开头,其余单词由数字,字母,下划线组成,总共是5位
        https://tool.oschina.net/regex/#

        -->
        <input type="text" required pattern="[A-Z][0-9a-zA-Z_]{4}">  <br>

        <input type="password" name="" id="">

        <input type="radio" name="gender">男 <input checked type="radio" name="gender">女  <br>

        <input type="checkbox" name="hobbies">sleeping<input type="checkbox" name="hobbies">sleeping<input type="checkbox" name="hobbies">sleeping  <br>

        <!-- 日期控件 - 兼容性不是特别好,不推荐使用,使用到日期控件的时候,都是推荐使用第三方的一些日历插件 -->
        <input type="date" name="" id="">  <br>

        <!-- 邮箱 -->
        <input type="email" name="" id=""> <br>

        <input type="range" name="" id="">  <br>

        <input type="number" min="5" max="10" step="2" value="5" name="" id="">  <br>

        <!-- 提交按钮 -->
        <input type="submit" value="注册">

        <input type="reset" value="重置">

        <!-- 普通按钮 - 配合js程序来 -->
        <input type="button" value="普通按钮" onclick="test()">

    </form>

    <script>

        //定义了一个函数
        function test(){
            alert("我是一个单击事件")
        }
    </script>

</body>
</html>